<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Manage | 访客统计</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Pace -->
    <link rel="stylesheet" href="../../plugins/AdminLTE/plugins/pace-master/themes/blue/pace-theme-flash.css">
    <script type="text/javascript" src="../../plugins/AdminLTE/plugins/pace-master/pace.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../../plugins/AdminLTE/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../../plugins/AdminLTE/dist/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="../../plugins/AdminLTE/dist/css/ionicons.min.css">
    <!-- daterangepicker -->
    <link rel="stylesheet" href="../../plugins/AdminLTE/plugins/daterangepicker/daterangepicker.css">
    <!-- bootstrap table -->
    <link rel="stylesheet" href="../../plugins/AdminLTE/plugins/bootstrap-table/bootstrap-table.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../plugins/AdminLTE/dist/css/AdminLTE.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>
        访客统计
    </h1>
    <ol class="breadcrumb">
        <li><i class="fa fa-home"></i> Home</li>
        <li>系统监控</li>
        <li>访客统计</li>
    </ol>
</section>

<section class="content">
    <div class="box box-primary collapsed-box">
        <div class="box-header no-border">
            <div class="box-tools pull-right">
                <button style="margin-top: -10px;" type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-plus"></i>查询
                </button>
            </div>
        </div>
        <div class="box-body no-border">
            <form onsubmit="return false" class="form-inline col-xs-12" style="line-height: 40px; margin-bottom: 5px;">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">用户名称</div>
                        <input name="userName" type="text" class="form-control">
                        <div class="input-group-addon"><i class="fa fa-user"></i></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"></i>客户端IP</div>
                        <input name="clientIp" type="text" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">操作系统</div>
                        <input name="operatingSystemName" type="text" class="form-control">
                        <div class="input-group-addon"><i class="fa fa-tv"></i></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">浏览器</div>
                        <input name="browser" type="text" class="form-control">
                        <div class="input-group-addon"><i class="fa fa-internet-explorer"></i></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">登录时间</div>
                        <input name="loginTime" type="text" class="form-control" style="width: 260px">
                        <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
                <button onclick="searchByCondition()" type="button" class="btn btn-primary">查询</button>
                <button type="reset" class="btn btn-danger">重置</button>
            </form>
        </div>
    </div>
    <table id="monitor_guest_data" class="table-bordered table-condensed"></table>
</section>
<!-- jQuery 2.2.3 -->
<script src="../../plugins/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI -->
<script src="../../plugins/AdminLTE/plugins/jQueryUI/jquery-ui.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../../plugins/AdminLTE/bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/AdminLTE/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../plugins/AdminLTE/dist/js/app.min.js"></script>
<!-- daterangepicker -->
<script src="../../plugins/AdminLTE/plugins/daterangepicker/moment.js"></script>
<script src="../../plugins/AdminLTE/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap table -->
<script src="../../plugins/AdminLTE/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="../../plugins/AdminLTE/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<!--export-->
<script src="../../plugins/export/tableExport.js"></script>
<script src="../../plugins/export/bootstrap-table-export.js"></script>
<script>
    var $tTable, queryUrl = '/monitor/guestRecord';
    $(function () {
        $("input[name='loginTime']").daterangepicker({
            timePicker: true,
            startDate: false,
            showDropdowns: true,
            timePicker24Hour: true,
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            }
        });
        loadData();
    })

    function searchByCondition() {
        $tTable.bootstrapTable("refresh");
    }

    function loadData() {
        $tTable = $('#monitor_guest_data').bootstrapTable({
            url: queryUrl,
            dataField: "list",
            queryParams: function (params) {
                return top.serializeParams(params, $("form").serialize())
            },
            showRefresh: true,//是否显示刷新按钮
            showToggle: true,//是否显示切换视图（table/card）按钮
            showColumns: true,//是否显示内容列下拉框
            minimumCountColumns: 2,//最小隐藏列的数量
            pagination: true,
            sidePagination: "server",
            pageNumber: 1,
            pageSize: 10,
            pageList: [10, 20, 30, 50, 100],
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            showExport: true,
            exportDataType: 'basic',
            exportOptions:{
                fileName: '访客统计'
            },
            columns: [
                {
                    field: 'userName',
                    title: '用户名称/账号',
                    formatter: function (field, row, index) {
                        return row.userName + "/" + row.userAccount;
                    }
                }, {
                    field: 'loginTime',
                    title: '登录时间'
                }, {
                    field: 'onlineTime',
                    title: '在线时长',
                    formatter: function (field, row, index) {
                        if (row.onlineTime)
                            return row.onlineTime.replace("0毫秒", "");
                        return row.onlineTime;
                    }
                }, {
                    field: 'logoutTime',
                    title: '退出时间'
                }, {
                    field: 'lastTime',
                    title: '最后操作时间'
                }, {
                    field: 'online',
                    title: '是否在线',
                    align: 'center',
                    formatter: function (field, row, index) {
                        if (row.online == 'false') {
                            return '<i class="text-danger">否</i>';
                        }
                        return '<i class="text-bold text-success">是</i>';
                    }
                }, {
                    field: 'clientIp',
                    title: '客户端IP'
                }, {
                    field: 'deviceType',
                    title: '设备类型'
                }, {
                    field: 'groupName',
                    title: '系统类型'
                }, {
                    field: 'operatingSystemName',
                    title: '操作系统'
                }, {
                    field: 'browser',
                    title: '浏览器'
                }
            ]
        });
    }
</script>
</body>
</html>
